{% extends 'frontend/index_base.html' %}

{% block title %}Scratch {{ level }}级试卷列表{% endblock %}

{% block nav_exercise %}active{% endblock %}

{% block extra_css %}
<style>
.exam-list-header {
    background: linear-gradient(135deg, #4a90e2, #357abd);
    color: white;
    padding: 2rem 0;
    margin-bottom: 3rem;
    border-radius: 0 0 10px 10px;
}
.exam-card {
    margin-bottom: 1.5rem;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.exam-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.exam-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    color: #666;
}
.exam-stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.difficulty-badge {
    position: absolute;
    top: 10px;
    right: 10px;
}
.filter-section {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.filter-title {
    color: #4a90e2;
    margin-bottom: 1rem;
    font-weight: 600;
}
.filter-section label {
    color: #666;
    font-weight: 500;
}
</style>
{% endblock %}

{% block content %}
<div class="exam-list-header">
    <div class="container">
        <h1 class="text-center mb-2">Scratch {{ level }}级试卷</h1>
        <p class="text-center mb-0">选择一份适合你的试卷开始练习</p>
    </div>
</div>

<div class="container">
    <div class="filter-section">
        <h3 class="filter-title">筛选条件</h3>
        <form id="filterForm" method="get" class="row g-3">
            <div class="col-md-6">
                <label class="form-label">难度等级</label>
                <select name="difficulty" class="form-select" onchange="this.form.submit()">
                    <option value="all" {% if request.args.get('difficulty') == 'all' %}selected{% endif %}>全部难度</option>
                    {% for i in range(1, 6) %}
                    <option value="{{ i }}" {% if request.args.get('difficulty') == i|string %}selected{% endif %}>{{ i }}级</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary w-100">应用筛选</button>
            </div>
        </form>
    </div>

    <div class="row">
        {% for exam in exams %}
        <div class="col-md-6">
            <div class="card exam-card">
                <div class="card-body">
                    <span class="badge bg-info difficulty-badge">{{ exam.difficulty }}级</span>
                    <h4 class="card-title">{{ exam.name }}</h4>
                    <div class="exam-stats">
                        <div class="exam-stat-item">
                            <i class="fas fa-list"></i>
                            <span>{{ exam.questions|length }}题</span>
                        </div>
                        <div class="exam-stat-item">
                            <i class="fas fa-clock"></i>
                            <span>{{ exam.created_at }}</span>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="{{ url_for('exercises.scratch_exercises.start_exam', level=level, exam_id=exam.id) }}" 
                           class="btn btn-primary w-100">开始练习</a>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12">
            <div class="alert alert-info text-center">
                暂无符合条件的试卷，请调整筛选条件重试
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
